<script setup lang="ts">
/*
 父子传值
   父传子
      <xxx :属性名="父组件属性" />
      xxx.vue
     js写法  const props=defineProps({
         属性名:{
           type:类型（Number）  0,1
           required:是否必传
           default:默认
           validator:值的验证
         }
       })

     // 基本写法   
     ts写法  const props=defineProps<{
            属性名?:ts类型
             }>()

      了解  withDefaults(defaultProps(...),{属性名:默认值})
      const {属性名=默认值}=defineProps<{
            属性名?:ts类型
             }>()

       了解  const props = defineProps({
                          num: {
                              type: Number as PropType<0 | 1>,
                              default: 0,
                              validator: value => {
                                return true
                              }
                          }
                        }) 

   子传父
     
     <xxx @方法名="父组件方法" @方法名2="父组件方法" />
     xxx.vue
     js写法
      const emits=defineEmits(['方法名'])
      emits('方法名',实参值)
     ts写法
      const emits=defineEmits<{
        (e:'方法名',x:number):void
        (e:'方法名2',x:number):void
      }>()
      emits(方法名,实参)

*/

import { ref } from 'vue'
import HmSon1 from './components/HmSon1.vue'
type Gender = 0 | 1
let num = ref<Gender>(0)
const changeNum = (val: Gender) => {
  num.value = val
  console.log(val)
}
</script>

<template>
  <div class="app-page">
    app
    <hr />
    <HmSon1 :num="num" @changeNum="changeNum"></HmSon1>
  </div>
</template>

<style lang="scss" scoped></style>
